<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
</head>
<!-- 作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示   -->
<style>
    body {
        margin: 0px auto;
        width: 900px;
    }

    .name {
        font-size: 30px;
        font-weight: bolder;
    }

    .price,
    .sumnum {
        font-size: 20px;
    }

    /* .sumnum {
        font-size: 20px;
    } */

    .title {
        margin-left: 310px;
    }

    .main {
        margin-top: 20px;
        width: 800px;
        height: 400px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .thing {
        margin-top: 35px;
        width: 370px;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>

<body>
    <div id="app">
        <div class="title">
            <h1>{{msg}}</h1>
        </div>

        <div class="main">
            <div class="thing" v-for="i,index in list">
                <div class="name">
                    {{i.name}}
                </div>
                <div class="price">
                    价格:{{i.price}}元/包
                </div>
                <div class="sumnum" v-if="i.buynum-i.num>0">
                    商品剩余数量为:
                    {{i.buynum-i.num}}
                </div>
                <div class="sumnum" v-else="i.buynum-i.num=0">
                    此商品暂时售空！
                </div>
                <div>
                    <img v-bind:src="i.img" width="300" height="300">
                </div>
                <div>
                    请输入购买数量:
                    <input type="number" class="buynum" min="0" max="100"   v-model="i.num">
                    <!-- <input @submit="submit(index)" type="submit" value="提交" class="submit"> -->
                </div>

            </div>
        </div>



    </div>
</body>
<script>
    var app = Vue.createApp({
        data: function () {
            return {
                msg: '推荐零食商品',
                list: [
                    {
                        name: '麦乐鸡块薯片',
                        img: "http://t15.baidu.com/it/u=99497490,1041695512&fm=224&app=112&f=JPEG?w=500&h=500",
                        price: 5.00,
                        num: 1,
                        buynum:100,
                    },
                    {
                        name: '日本人气小零食',
                        img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1803dd89-3162-4bd2-83c6-fb3ebb6eed65%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682133359&t=c5d11f39d95b03b365daaf157643f93e",
                        price: 15.00,
                        num: 1,
                        buynum:100,
                    },
                    {
                        name: '源氏大辣片',
                        img: "https://pic4.zhimg.com/50/v2-7cd7e682ec255941c5564a138ae8794f_hd.jpg",
                        price: 5.00,
                        num: 1,
                        buynum:100,
                    },
                    {
                        name: '趣多多饼干',
                        img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi1%2F787936378%2FO1CN01w8vaWJ1wzAmCwcoGM_%21%210-item_pic.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682134330&t=5a67b909ad068ae9c968d4e5d72446fc",
                        price: 20.00,
                        num: 1,
                        buynum:100,
                    }
                ]
            }

        },
    })
    app.mount('#app');
</script>


</html>